<template>
<div class="container clearfix">
    <classList class="classListul fl"></classList>
    <div class="carouselAd ">
        <el-carousel height="270px" arrow="always">
            <el-carousel-item v-for="item in asdvertisingList" :key="item">
                <div @click="carouselAdvertisingClick(item)" :style="{background:'url(' + item  +')',width:'100%',height:'100%',position:'relative'}"></div>
            </el-carousel-item>
        </el-carousel>
    </div>
    <div class="staticAd clearfix fr">
        <div class='topStaticAdvertising'  @click="carouselAdvertisingClick(topStaticAdvertisingObject)" :style="{background:'url('+ topStaticAdvertisingObject + ')'}"></div>
        <div class='bottomStaticAdvertising'  @click="carouselAdvertisingClick(bottomStaticAdvertisingObject)" :style="{background:'url('+ bottomStaticAdvertisingObject + ')'}"></div>
    </div>
</div>
</template>

<script>
import classList from "../common/ClassList.vue"

export default {
    name: 'Advertising',
    data(){
        return {
            "topStaticAdvertisingObject":"http://image-python.itheima.net/group1/M00/00/01/rBAAlV5GigSAW6JSAAA2pLUeB605909521",
            "bottomStaticAdvertisingObject":"http://image-python.itheima.net/group1/M00/00/01/rBAAlV5GifqAWb4lAAA98yvCs1I6264950",
        }
    },
    props: {
        asdvertisingList:{
            type: Array,
            default:function(){
                return ['http://image-python.itheima.net/group1/M00/00/01/rBAAlV5GiaWAVnGfAAC3B-z8J2c7045126',
                        'http://image-python.itheima.net/group1/M00/00/01/rBAAlV5GiZaAN7tcAAETwXb_pso9087865',
                        'http://image-python.itheima.net/group1/M00/00/01/rBAAlV5GiYWAPztqAAD0akkXmFo1618513',
                        'http://image-python.itheima.net/group1/M00/00/01/rBAAlV5Gia2ARS31AACpB-LsCdE4856717']
            }
        }
    },
    methods:{
        /*
           滚动的广告被点击
         */
        carouselAdvertisingClick(adParam){
            console.log(adParam);
            this.$emit("openCarouselAdvertising",adParam,true);
        }
    },
    components:{
        classList
    }
}
</script>
<style>
.container{
    width:1200px;
    margin: auto;
}

.classListul{
    width:17%
}

.carouselAd{
    height:270px;
    width: 760px;
    float: left;
    cursor: pointer;
}

.staticAd{
    background-color: yellowgreen;
    height:270px;
    width:217px;
    cursor: pointer;
}

.topStaticAdvertising{
    height:50%;
    width:100%;
    position: relative;
}

.bottomStaticAdvertising{
    width:100%;
    height:50%;
    position: relative;
}
</style>